import React, { Component, useRef } from 'react'
import { Form, Input, DatePicker, Space, Button } from 'antd'
import { SearchOutlined } from "@ant-design/icons";
import _ from 'lodash'
import { getDateTime3 } from '@/utils/getDate'
import TheTable from '@/components/TheTable'
import ThePagination from '@/components/ThePagination'
import TheButton from '@/components/TheButton'
import { apiGetStandOrderPage } from '@/request/cashier'

const { RangePicker } = DatePicker;

const SearchHeader = ({ getValue }) => {
  const formRef = useRef()
  const onFinish = (values) => {
    if (values.time && values.time.length) {
      values.createTimeStart = getDateTime3(values.time[0])
      values.createTimeEnd = getDateTime3(values.time[1])
    }
    delete (values.time)
    _.forIn(values, (v, k) => {
      if (!v) {
        delete (values[k])
      }
    })
    getValue(values)
  }
  const reset = () => {
    formRef.current.setFieldsValue({
      orderCode: '',
      time: []
    })
    getValue({})
  }
  return <Form layout={'inline'} onFinish={onFinish} ref={formRef}>
    <Form.Item name="orderCode">
      <Input suffix={<SearchOutlined />} placeholder="订单编号" />
    </Form.Item>
    <Form.Item label="订单时间" name={'time'}>
      <RangePicker />
    </Form.Item>
    <Form.Item>
      <Space>
        <Button type='primary' htmlType='submit'>搜索</Button>
        <Button onClick={reset}>重置</Button>
      </Space>
    </Form.Item>
  </Form>
}

export default class Cancel extends Component {
  state = {
    columns: [
      {
        title: '订单编号',
        dataIndex: 'orderCode',
        key: 'orderCode'
      },
      {
        title: '取消订单金额',
        dataIndex: 'orderTotalPrice',
        key: 'orderTotalPrice',
        render: (text, record) => {
          return <React.$Price price={text || 0} />
        }
      },
      {
        title: '收银员',
        dataIndex: 'cashierName',
        key: 'cashierName'
      },
      {
        title: '取消订单原因',
        dataIndex: 'closeReason',
        key: 'closeReason'
      },
      {
        title: '取消时间',
        dataIndex: 'createTime',
        key: 'createTime'
      },
      {
        title: '操作',
        render: (text, record) => {
          return <TheButton   hasPermi={['cashier:cancel:view']} onClick={() => this.props.history.push(`/cashier/cancel/details/${record.orderId}`)}>查看订单</TheButton>
        }
      },
    ],
    dataSource: [],
    pageData: {
      pageNo: 1,
      pageSize: 10
    },
    total: 0
  }
  componentDidMount() {
    this.getData()
  }
  getData = async () => {
    const { pageData, searchValue } = this.state
    let res = await apiGetStandOrderPage({ ...pageData, ...searchValue, orderState: 0 })
    if (res.data && res.code === 0) {
      this.setState({
        dataSource: res.data,
        pageData: {
          pageNo: res.pageNo,
          pageSize: res.pageSize
        },
        total: res.totalCount
      })
    }
  }
  pageChange = (pageNo, pageSize) => {
    this.setState({
      pageData: {
        pageNo, pageSize
      }
    }, () => {
      this.getData()
    })
  };
  getValue = value => {
    this.setState({
      searchValue: value,
      pageData: {
        pageNo: 1,
        pageSize: 10
      }
    }, () => this.getData())
  }
  render() {
    const { columns, dataSource, loading, pageData: { pageSize, pageNo }, total } = this.state
    return (
      <div className='p-layout-box'>
        <SearchHeader getValue={this.getValue} />
        <div className="p-layout-content-pagination">
          <TheTable columns={columns} dataSource={dataSource} loading={loading} scroll={{ x: "max-content", y: '63vh' }} />
          <ThePagination pageNo={pageNo} pageSize={pageSize} total={total} pageChange={this.pageChange} />
        </div>
      </div>
    )
  }
}
